import { Component, OnInit } from '@angular/core';
import { FormControl,FormGroup,FormArray,FormBuilder,AbstractControl,Validators } from "@angular/forms";
import { mobileValidator,equalValidator,mobileAsyncValidator } from "../validator/validators";

@Component({
  selector: 'app-reactive-regist',
  templateUrl: './reactive-regist.component.html',
  styleUrls: ['./reactive-regist.component.css']
})
export class ReactiveRegistComponent implements OnInit {
  
  // xxx(control: AbstractControl): {[key:string]:any} {
  //   return null;
  // }

  // mobileValidator(control: FormControl): any {
  //   var myreg = /(((13[0-9]{1})|(15[0-9]{1})|(18[0-9]{1}))+\d{8})$/;
  //   let valid = myreg.test(control.value);
  //   console.log("mobile的校验结果是："+valid);
  //   return valid ? null: {mobile: true};
  // }

  // equalValidator(group: FormGroup):any {
  //   let password:FormControl = group.get("password") as FormControl;
  //   let pconfirm:FormControl = group.get("pconfirm") as FormControl;
  //   let valid:boolean = (password.value === pconfirm.value);
  //   console.log("密码校验结果："+ valid);
  //   return valid ? null : {equal: true};
  // }

  
  formModel:FormGroup;
  constructor(fb: FormBuilder) { 
    //用formModel这个对象来表示整个表单的数据。
    // this.formModel= new FormGroup({
    //   username: new FormControl(),
    //   mobile: new FormControl(),
    //   passwordsGroup: new FormGroup({
    //     password: new FormControl(),
    //     pconfirm: new FormControl()
    //   })
    // })
    this.formModel=fb.group({
      // username: ['',Validators.required],
      username: ['',[Validators.required,Validators.minLength(6)]],
      mobile: ['',mobileValidator,mobileAsyncValidator],  //这里把this去掉了。因为提取出去成为全局的。//第三个参数是传递异步校验的。
      passwordsGroup: fb.group({
        password: ['',Validators.minLength(6)],
        pconfirm: ['']
      },{validator: equalValidator}) //这个是组的校验器的引用。
    })
    //使用formbuild可以传参。参数一般是校验方法，后面有。
  }

  ngOnInit() {
  }

  onSubmit(){
    //获取本次校验是否成功，为布尔值
    // let isValid:boolean = this.formModel.get("username").valid;
    // console.log("username的校验结果是："+ isValid);
    //获取校验未成功的返回信息。
    // let errors:any = this.formModel.get("username").errors;
    // console.log("username的错误信息是："+ JSON.stringify(errors));

    if(this.formModel.valid){   //只有当我们的这个valid为true时，才证明里面的所有的valid都为true。只有有一个为FALSE。就为false。
      console.log(this.formModel.value);
    }

    // console.log(this.formModel.value);
  }

}
